import { NodeSize } from '../config'

export default function jsonOutput(flow) {
  flow.register('JsonOutput', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M130.438095 281.86819l155.721143-0.02438V127.561143h-46.323809v75.166476L112.469333 75.361524 79.725714 108.129524 207.09181 235.52H130.438095z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M533.430857 334.945524c51.516952 16.676571 80.798476 53.808762 92.623238 95.134476-11.751619-41.325714-41.008762-78.457905-92.623238-95.134476zM512.146286 682.837333a131.096381 131.096381 0 0 1-71.436191-38.424381c17.603048 18.67581 41.22819 32.670476 71.436191 38.424381zM459.897905 503.125333c0 67.900952 52.248381 91.038476 52.248381 91.038477l0.950857-0.463239 0.073143 0.024381c4.388571-2.048 51.419429-25.453714 51.419428-87.673904a95.207619 95.207619 0 0 0-49.688381-85.967238c-1.731048-0.853333-2.755048-1.219048-2.755047-1.219048s-52.248381 19.992381-52.248381 84.260571z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M783.993905 778.361905V234.642286H441.368381l-201.069714 201.069714v342.649905h543.695238z m-271.847619-448.170667l3.900952 0.048762a176.298667 176.298667 0 0 1-3.900952 352.572952 176.323048 176.323048 0 0 1 0-352.621714z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M482.791619 193.219048l-41.423238 41.423238h342.625524v543.719619h-543.695238V435.712l-41.447619 41.447619v342.625524h626.590476V193.219048z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M533.430857 334.945524c51.590095 16.700952 80.871619 53.833143 92.623238 95.134476 0.463238 1.633524 0.78019 3.291429 1.194667 4.949333 0.609524 2.462476 1.29219 4.924952 1.779809 7.41181 16.993524 84.796952-35.132952 180.077714-116.711619 151.722667l0.828953-0.414477-0.073143-0.024381-0.950857 0.463238s-52.248381-23.137524-52.248381-91.038476c0-64.26819 52.248381-84.260571 52.248381-84.260571s1.024 0.390095 2.755047 1.219047l-0.048762-0.02438-1.633523-0.853334-1.048381-0.512c-110.738286-22.308571-147.114667 145.334857-71.436191 225.718857a130.925714 130.925714 0 0 0 71.436191 38.424381 176.323048 176.323048 0 0 0 3.900952-352.572952c5.680762 1.219048 11.142095 2.657524 16.335238 4.315428 0.390095 0.073143 0.707048 0.219429 1.048381 0.341334z'
            }
          ),
          h(
            'path',
            {
              fill: '#9FB2C0',
              d: 'M512.146286 682.837333c-30.208-5.753905-53.833143-19.748571-71.436191-38.424381-75.678476-80.384-39.326476-248.027429 71.436191-225.718857l1.048381 0.512a66.608762 66.608762 0 0 1 1.682285 0.877715 95.207619 95.207619 0 0 1 49.688381 85.967238c0 62.22019-47.030857 85.625905-51.419428 87.673904a25.283048 25.283048 0 0 0-0.828953 0.414477c81.578667 28.355048 133.705143-66.925714 116.711619-151.722667-0.512-2.486857-1.170286-4.949333-1.779809-7.41181-0.414476-1.657905-0.731429-3.31581-1.194667-4.949333-11.800381-41.325714-41.106286-78.457905-92.623238-95.134476l-1.048381-0.390095a177.468952 177.468952 0 0 0-16.335238-4.315429 176.298667 176.298667 0 0 0-180.224 176.249905 176.37181 176.37181 0 0 0 176.323048 176.371809z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          'Json输出'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
